import React from 'react'
import Reducer from '../rd/Reducer';
import C from '../css/Cart.module.css'
import { Row, Col, Icon, Checkbox } from 'antd';
import Store from '../rd/Store'
import Action from '../rd/Action'
import axios from 'axios'


export default class Cart extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            falg: false,
            list: [],
            arrs: [],
            num:0
        }
    }





    render() {
        let _this = this

        return (
            <div className={C.xiang}>
                <div className={C.ding}>
                    <h5>
                        购物车


                    </h5>
                    <div className={C.dingx} ref="ccbox">
                        <Row className={C.row} >
                            <Col span={8} className={C.shangp}>

                                <Col span={4} >
                                    {/* <checkbox  */}
                                    <input type="checkbox" className="zongji" onClick={this.zongji.bind(this)} />
                                </Col>
                                <Col span={20} >类型</Col>

                            </Col>
                            <Col span={8} className={C.shangp1}>
                                <Col span={4} ></Col>

                                <Col span={4} >规格</Col>
                                <Col span={8} >单价</Col>
                                <Col span={8} >数量</Col>


                            </Col>
                            <Col span={8} >
                                <Col span={12} >小计（折后）</Col>
                                <Col span={12} >操作</Col>

                            </Col>
                        </Row>
                    </div>
                    {this.state.list.map(function (item, i) {

                        if (item.product) {
                            return (

                                <div className={C.myding} key={i}>
                                    <Row className={C.row1} >
                                        <Col span={8} className={C.shangp}>
                                            <Col span={4} className={C.erf} >
                                                <input type="checkbox" className="xiaoji" onClick={_this.xiaoji.bind(_this,item.product.price,item.quantity)} />
                                            </Col>
                                            <Col span={10} ><img src={item.product.coverImg} /></Col>
                                            <Col span={10} className={C.erf2} >

                                                <Col span={24} >

                                                    {item.product.name}</Col>


                                            </Col>
                                        </Col>
                                        <Col span={8} className={C.shangp1}>
                                            <Col span={4} ></Col>

                                            <Col span={4} >默认</Col>

                                            <Col span={8} >{item.product.price}.00</Col>
                                            <Col span={8} className={C.kongzhi} >
                                                <div className="ccbox">

                                                    <span className={C.kong} onClick={_this.jian.bind(_this, item._id,item.product.price)}>-</span><input type="text" value={item.quantity} className={C.shul} ref='ipts' /><span className={C.kong1} onClick={_this.add.bind(_this, item._id,item.product.price)}>+</span>
                                                </div>

                                            </Col>


                                        </Col>
                                        <Col span={8} >

                                            <Col span={12} >{item.product.price*item.quantity}.00</Col>
                                            <Col span={12} className={C.erf1}>
                                                <Col span={8} onClick={_this.dli.bind(_this, item._id)} >删除</Col>
                                                <Col span={4} >|</Col>


                                                <Col span={12} >移入收藏</Col>


                                            </Col>
                                        </Col>
                                    </Row>
                                </div>


                            )

                        }
                    })}

                </div>

                <div className={C.foot}>
                    <div className={C.bottom_way}>
                        <span>已选商品<span className={C.choose_num} id="count">0</span>件</span>
                        <span>合计（不含运费）：<span className={C.choose_num}>¥</span><span id="total" className={C.choose_num}>{this.state.num}.00</span></span>
                        <a href="javascript:;" className={C.settlement_btn}>结算</a>
                    </div>
                    <div className={C.bw_list}>
                        <a href="javascript:;" >删除</a>
                        <a href="javascript:;" >清除失效宝贝</a>
                        <a href="javascript:;">移入收藏夹</a>
                    </div>


                </div>
            </div>




        )








    }
    jian(num,pice, e) {
        let ccbox = document.querySelectorAll('.ccbox input')

            let a=e.target.nextElementSibling
     
        if (a.value == 1) {
            return 1
        }
        a.value = parseInt(a.value) - 1
        let _this = this
        let token = localStorage.getItem('token')
        console.log()
        axios({
            url: 'http://api.cat-shop.penkuoer.com/api/v1/shop_carts',

            method: 'post',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            data: { product: num, quantity:1}

        }).then(function (data) {
            console.log(data.data)
            if (data.data.code == "success") {
                let arr = _this.state.list
                arr.map(function (item, i) {
                    if (num == item._id) {
                        arr[i].quantity =  arr[i].quantity -1
                        _this.setState({
                            list: arr
                        })

                    }


                })
               
            }


        })

        this.xiaoji(a.value,pice)


    }

    componentDidUpdate() {
        let _this = this
        let token = localStorage.getItem('token')
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/shop_carts',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
        }).then(function (data) {
         

        })





    }

    add(num,pice, e) {
        let a = e.target.previousElementSibling

      
        a.value = parseInt(a.value) + 1
     
        let _this = this
        let token = localStorage.getItem('token')
        axios({
            url: 'http://api.cat-shop.penkuoer.com/api/v1/shop_carts',

            method: 'post',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            data: { product: num, quantity: 1 }

        }).then(function (data) {
            console.log(data.data)
            if (data.data.code == "success") {
                let arr = _this.state.list
                arr.map(function (item, i) {
                    if (num == item._id) {
                        arr[i].quantity += 1
                        _this.setState({
                            list: arr
                        })

                    }


                })

            }


        })
        this.xiaoji(a.value,pice)
    }

    dli(id, e) {
        let _this = this
        console.log(id, e)
        let token = localStorage.getItem('token')
        //  let pid='5d2d88b026a7daceced3aa16'
        e.target.parentNode.parentNode.parentNode.parentNode.remove()
        console.log(e.target.parentNode)
        axios({
            url: 'http://api.cat-shop.penkuoer.com/api/v1/shop_carts/' + id,
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            method: 'delete'
        }).then(function (data) {
            console.log(data)

        })



    }
    zongji(e) {
        let xiaoji = document.querySelectorAll('.xiaoji')

        console.log(e.target)
        for (let i = 0; i < xiaoji.length; i++) {

            if (e.target.checked == true) {

                xiaoji[i].checked = true
            }
            else {
                xiaoji[i].checked = false
            }
        }


    }
    xiaoji(a,b,e) {
        console.log(a,b)
        let owe=0
        let _this = this
        let zongji = document.querySelector('.zongji')
        let xiaoji = document.querySelectorAll('.xiaoji')
        // console.log(xiaoji)
        let x=parseInt( a*b)
        for (let j = 0; j < xiaoji.length; j++) {
          
            if (xiaoji[j].checked == true) {
                owe+=1
                let ss=_this.state.num
               
               _this.setState({
                    num:x+ss


               })
               console.log(_this.state.num) 
            }
         

        }
       
      
      
        if (owe == xiaoji.length) {
            zongji.checked = true

        }
        else {
            zongji.checked = false
        }


    }
    componentDidMount() {

        let _this = this
        let token = localStorage.getItem('token')

        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/shop_carts',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
        }).then(function (data) {
           
            _this.setState({
                list: data.data,

            })

        })




    }

}